<template>
  <a-modal
    title="分屏"
    :width="modalWidth"
    :visible="visible"
    :bodyStyle="bodyStyle"
    style="top: 0px;"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <split-pane :min-percent='20' :default-percent='70' split="vertical">
      <template slot="paneL">
        <div style="padding:10px">
            <div class="table-page-search-wrapper" >
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :md="6" :sm="24">
                  <a-form-item label="部门类别">
                    <a-select placeholder="请选择" default-value="0">
                      <a-select-option value="0">全部</a-select-option>
                      <a-select-option value="1">关闭</a-select-option>
                      <a-select-option value="2">运行中</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="评分部门">
                    <a-select placeholder="请选择" default-value="0">
                      <a-select-option value="0">全部</a-select-option>
                      <a-select-option value="1">关闭</a-select-option>
                      <a-select-option value="2">运行中</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="8">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" icon="search">查询</a-button>
                    <a-button type="primary" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
        </div>
        <a-table :columns="columns" :dataSource="loadData" :bordered="false" :scroll="{ y: height }">
        </a-table>
        </div>
        
      </template>
      <template slot="paneR">
        
      </template>
    </split-pane>

  </a-modal>
</template>

<script>
  import splitPane from 'vue-splitpane'
  export default {
    name: "SplitPanelModal",
    components:{
      splitPane,
    },
    data () {
      return {
        visible: false,
        bodyStyle:{
          padding: "0",
          height:(window.innerHeight-150)+"px",
          width:'100%'
        },
        height:(window.innerHeight-450)+"px",
        modalWidth:800,
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        columns: [
          {
            title: '',
            dataIndex: 'idx',
            width: 50
          },
          {
            title: '评分年月',
            dataIndex: 'no',
            scopedSlots: { customRender: 'no' },
          },
          {
            title: '被评分部门',
            dataIndex: 'description',
            width: 120,
            scopedSlots: { customRender: 'description' },
          },
          {
            title: '评分指标',
            dataIndex: 'callNo',
            sorter: true,
            needTotal: true,
            scopedSlots: { customRender: 'callNo' },
            // customRender: (text) => text + ' 次'
          },
          {
            title: '总分',
            dataIndex: 'all',
            needTotal: true,
            scopedSlots: { customRender: 'all' },
          },
          {
            title: '评分',
            dataIndex: 'scroe',
            scopedSlots: { customRender: 'scroe' },
          },
          {
            title: '一月',
            dataIndex: 'month1',
          },
          {
            title: '二月',
            dataIndex: 'month2',
          },
          {
            title: '三月',
            dataIndex: 'month3',
          },
          {
            title: '四月',
            dataIndex: 'month4',
          },
          {
            title: '五月',
            dataIndex: 'month5',
          },
          {
            title: '六月',
            dataIndex: 'month6',
          },
          {
            title: '七月',
            dataIndex: 'month7',
          },
          {
            title: '八月',
            dataIndex: 'month8',
          },
          {
            title: '九月',
            dataIndex: 'month9',
          },
          {
            title: '十月',
            dataIndex: 'month10',
          },
          {
            title: '十一月',
            dataIndex: 'month12',
          },
          {
            title: '十二月',
            dataIndex: 'month13',
          },
          {
            title: '意见',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
          },
          {
            table: '操作',
            dataIndex: 'operation',
            width: '120px',
            scopedSlots: { customRender: 'operation' },
          }
        ],
        loadData: [],
      }
    },
    created () {
      this.modalWidth = window.innerWidth-0;
    },
    methods: {
      show () {
        this.visible = true;
      },
      handleOk(){

      },
      handleCancel () {
        this.visible = false;
      },
      queryData(){
        this.$http.get('/api/service', {
          params: Object.assign(this.queryParam)
        }).then(res => {
            this.loadData = res.result.data.map((item,index)=>{
              item.idx = index*1+1
              return item
            })
        })
      },
    },
    mounted() {
      this.queryData()
    }
  }
</script>

<style scoped>
</style>